<!-- 部门管理 -->
<style lang="less" scoped>
.user {
  margin: 15px;

  .icon-btn {
    font-size: 20px;
    color: #555555;
  }
  .smallForm {
    display: inline-block;
  }
  .smallArr {
    width: 15%;
    display: inline-block;
  }
  .mr20 {
    margin-right: 20px;
  }
  .formItem {
    width: 200px;
  }
  .ivu-tabs {
    .ivu-tabs-tabpane {
      padding: 0;
    }
  }
}
@media screen and (max-width: 1601px) {
  .user {
    .mr20 {
      margin-right: 5px;
    }
  }
}
@media screen and (max-width: 1488px) {
  .user {
    .formItem {
      width: 150px;
    }
  }
}
</style>


<template>
  <div class="user">
    <Card :bordered="false">
      <p slot="title"
         class="white">
        系统管理 >
        <span class="select-font">用户管理</span>
      </p>
      <div>
        <Button type="primary"
                @click="addUser"
                class="mr20">新增用户</Button>
        <Button type="error"
                @click="del1"
                class="mr20"
                v-if="!isTown">删除用户</Button>
        <Form :model="formItem"
              class="smallForm">
          <Input v-model="formItem.realname"
                 :maxlength="20"
                 class="formItem mr20"
                 placeholder="请输入用户姓名"></Input>
          <Input v-model="formItem.username"
                 :maxlength="20"
                 class="formItem mr20"
                 placeholder="请输入用户名"></Input>
          <Input v-show="saveType === 2"
                 v-model="formItem.ass_chief_name"
                 :maxlength="20"
                 class="formItem mr20"
                 placeholder="请输入绑定河长名"></Input>
          <dep-select @getData="getDepData"
                      class="formItem mr20"></dep-select>
          <area-select @getData="getAreaData"
                       class="formItem mr20"></area-select>
        </Form>
        <Button type="info"
                @click="submitSearch(1,saveType)">搜索</Button>
      </div>
    </Card>
    <div class="center">
      <Tabs @on-click="aa">
        <TabPane label="河长用户"
                 name="河长用户">
        </TabPane>
        <TabPane label="河长办用户"
                 name="河长办用户">
        </TabPane>
        <TabPane label="河长助理用户"
                 name="河长助理用户">
        </TabPane>
      </Tabs>
      <Table :data="userData"
             :columns="saveType === 2 ? theadArr2 : theadArr"
             @on-selection-change="showSelect"
             stripe></Table>
      <Page style="margin-top: 10px"
            class="pull-right"
            :total="waterRecordPage.total"
            :current="actionPage"
            :page-size="waterRecordPage.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
      <Modal v-model="userModal"
             :mask-closable="false">
        <div slot="header">{{updateTitle}}</div>
        <Form :model="userItem"
              :rules="rules"
              ref="userForm"
              :label-width="100">
          <Form-item label="用户账号"
                     prop="username">
            <Input v-model="userItem.username"
                   :readonly="btnChange"
                   :maxlength="15"
                   @on-blur="checkName"
                   :disabled="isEdit"
                   placeholder="请输入账号"></Input>
          </Form-item>
          <Form-item label="用户密码"
                     prop="password"
                     v-if="btnSave">
            <Input v-model="userItem.password"
                   :maxlength="16"
                   type="password"
                   placeholder="请输入密码"></Input>
          </Form-item>
          <Form-item label="再次输入密码"
                     prop="password2"
                     v-if="btnSave">
            <Input v-model="userItem.password2"
                   :maxlength="16"
                   type="password"
                   placeholder="请输入密码"></Input>
          </Form-item>
          <Form-item label="用户名称"
                     prop="realname">
            <Input v-model="userItem.realname"
                   :maxlength="16"
                   :disabled="isEdit"
                   placeholder="请输入名称"></Input>
          </Form-item>
          <Form-item label="用户邮箱"
                     prop="email">
            <Input v-model="userItem.email"
                   :maxlength="20"
                   placeholder="请输入邮箱"></Input>
          </Form-item>
          <Form-item label="电话号码"
                     prop="mobile">
            <Input v-model="userItem.mobile"
                   :maxlength="11"
                   placeholder="请输入联系方式"></Input>
          </Form-item>
          <Form-item label="用户角色"
                     prop="rolename">
            <Select v-model="userItem.rolename"
                    @on-change="changeRole"
                    filterable
                    clearable
                    style="width:95%">
              <Option v-for="item in rolenameList"
                      :value="item.rolename"
                      :key="item.rolename">{{ item.rolename }}</Option>
            </Select>
          </Form-item>
          <Form-item label="用户部门"
                     prop="departmentName">
            <Select v-model="userItem.departmentName"
                    @on-change="getAssList"
                    filterable
                    clearable
                    style="width:95%">
              <Option v-for="item in departmentNameList"
                      :value="item"
                      :key="item">{{ item }}</Option>
            </Select>
          </Form-item>
          <Form-item label="所属河长"
                     v-if="userItem.user_type === '6' || userItem.user_type === '9'">
            <!-- 绑定河长一对多 -->
            <Select @on-clear="changeAssChief"
                    v-model="userItem.ass_chiefs"
                    filterable
                    clearable
                    multiple
                    style="width:95%">
              <Option v-for="(item,index) in assList"
                      :key="index"
                      :value="item.userid">{{item.realname}}</Option>
            </Select>
            <!-- 绑定河长一对一 -->
            <!-- <Select @on-clear="changeAssChief" v-model="userItem.ass_chiefs" filterable clearable style="width:95%">
              <Option v-for="(item,index) in assList" :key="index" :value="item.userid">{{item.realname}}</Option>
            </Select> -->
          </Form-item>
          <Form-item label="用户类型"
                     prop="user_type">
            <Select v-model="userItem.user_type"
                    disabled
                    clearable
                    style="width:95%">
              <Option v-for="item in typeList"
                      :value="item.value"
                      :key="item.value">{{ item.title }}</Option>
            </Select>
          </Form-item>
          <Form-item label="在职位置"
                     prop="position">
            <Input v-model="userItem.position"
                   :maxlength="50"
                   placeholder="请输入在职位置"></Input>
          </Form-item>
        </Form>
        <div slot="footer">
          <Button v-if="btnSave"
                  type="primary"
                  @click="ok(0)">保存</Button>
          <Button v-if="btnChange"
                  type="primary"
                  @click="ok(1)">修改</Button>
          <Button @click="cancel">取消</Button>
        </div>
      </Modal>
      <del-modal ref="delModal"
                 title="用户"
                 @del="del"
                 :delArr="selectData"
                 :url="urlUserDel"></del-modal>
      <Modal v-model="comfirmModal"
             width="400">
        <p slot="header"
           style="color:#f60;text-align:center">
          <Icon type="information-circled"></Icon>
          <span>重置密码确认</span>
        </p>
        <div style="text-align:center">
          <p>是否确认重置回系统初始密码？</p>
        </div>
        <div slot="footer">
          <Button type="error"
                  size="large"
                  long
                  @click="backPassword">重置</Button>
        </div>
      </Modal>
      <Modal v-model="riverModal"
             title="河长负责的河流"
             :mask-closable="false"
             width="600">
        <Table :data="riverData"
               :columns="riverColumns"
               stripe></Table>
      </Modal>
      <Modal title="查看河长头像"
             v-model="imgModal"
             width="700">
        <img :src="imgpath"
             style="max-width: 100%;max-height: 100vh;" />
      </Modal>
      <Modal title="删除用户头像"
             v-model="modalDel">
        <p>确认删除用户头像？</p>
        <div slot="footer">
          <Button type="error"
                  @click="delTx">删除</Button>
          <Button @click="modalDel = false">取消</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>


<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import areaSelect from 'public/areaSelect';
import depSelect from 'public/depSelect';
import delModal from 'public/delModal';
import tableDropdown from 'public/tableHeaderDropdown';
import { domain2 } from 'global/setting';
import md5 from 'md5';
export default {
  components: {
    'del-modal': delModal,
    'area-select': areaSelect,
    'dep-select': depSelect,
  },
  data() {
    const valideRePassword = (rule, value, callback) => {
      if (value !== this.userItem.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      urlUserList: '/sys/userinfo/list',
      urlUserNew: '/sys/userinfo/new',
      urlUserEdit: '/sys/userinfo/edit',
      urlUserDel: '/sys/userinfo/del',
      urlRoleList: '/sys/role/list',
      urlDepartmentNameList: '/sys/department/distinct',
      urlAddressList: '/sys/department/getTree',
      urlPassWord: '/sys/userinfo/pwdreset',
      urlriver: '/bsi/riverchief/list',
      riverModal: false,
      imgModal: false,
      modalDel: false,
      imgpath: '',
      userData: [],
      riverData: [],
      rules: {
        username: [
          { required: true, message: '用户账号不能为空', trigger: 'blur' },
          {
            pattern: '^((?![A-Z]).)*$',
            message: '请不要使用大写',
            trigger: 'blur',
          },
          { min: 3, max: 15, message: '用户账号请大于2位小于16位' },
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback, source, options) {
              let reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[.~!?@#\-\+\=\_$%^&*])[\da-zA-Z~.!?@#\-\+\=\_$%^&*]{8,16}$/;
              if (value.length < 8) {
                callback(new Error('密码不能少于8位'));
              } else if (value.length > 16) {
                callback(new Error('密码不能大于16位'));
              } else if (!reg.test(value)) {
                callback(new Error('密码中至少包含数字、字母和符号'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ],
        password2: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback, source, options) {
              let reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[.~!?@#\-\+\=\_$%^&*])[\da-zA-Z~.!?@#\-\+\=\_$%^&*]{8,16}$/;
              if (value.length < 8) {
                callback(new Error('密码不能少于8位'));
              } else if (value.length > 16) {
                callback(new Error('密码不能大于16位'));
              } else if (!reg.test(value)) {
                callback(new Error('密码中至少包含数字、字母和符号'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
          { validator: valideRePassword, trigger: 'blur' }
        ],
        realname: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
        ],
        mobile: [{ required: true, message: '电话不能为空', trigger: 'blur' }],
        rolename: [
          { required: true, message: '角色不能为空', trigger: 'change' },
        ],
        departmentName: [
          { required: true, message: '部门名不能为空', trigger: 'change' },
        ],
        position: [
          { required: true, message: '在职位置不能为空', trigger: 'blur' },
        ],
      },
      riverColumns: [
        {
          title: '河流名称',
          key: 'river_name',
        },
        {
          title: '河流编号',
          key: 'river_no',
        },
        {
          title: '所属区',
          key: 'area',
        },
        {
          title: '所属镇',
          key: 'town',
        },
      ],
      theadArr: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '用户名',
          minWidth: 120,
          key: 'username',
        },
        {
          title: '真实名称',
          minWidth: 120,
          key: 'realname',
        },
        {
          title: '联系电话',
          minWidth: 130,
          key: 'mobile',
        },
        {
          title: '电子邮件',
          minWidth: 130,
          key: 'email',
        },
        {
          title: '在职位置',
          width: 150,
          key: 'position',
        },
        {
          title: '角色',
          minWidth: 120,
          key: 'roleName',
        },
        {
          title: '用户类型',
          minWidth: 130,
          renderHeader: (h, params) => {
            if (this.saveType == '0') {
              return h(tableDropdown, {
                props: {
                  placement: 'bottom-start',
                  showArrow: true,
                  content: '用户类型',
                  data: [
                    { value: 'all', name: '全部' },
                    { value: '0', name: '村级河长' },
                    { value: '1', name: '镇级河长' },
                    { value: '2', name: '区级河长' },
                    { value: '3', name: '市级河长' },
                    { value: '6', name: '河长助理' },
                  ],
                },
                on: {
                  'on-choosed': data => {
                    if (data !== 'all') {
                      this.formItem.user_type = data;
                      this.submitSearch(1, this.saveType);
                    } else {
                      this.formItem.user_type = '';
                      this.submitSearch(1, this.saveType);
                    }
                  },
                },
              });
            } else {
              return h(tableDropdown, {
                props: {
                  placement: 'bottom-start',
                  showArrow: true,
                  content: '用户类型',
                  data: [
                    { value: 'all', name: '全部' },
                    { value: '4', name: '河长办经办人' },
                    { value: '7', name: '河长办负责人' },
                    { value: '8', name: '河长办人员' },
                  ],
                },
                on: {
                  'on-choosed': data => {
                    if (data !== 'all') {
                      this.formItem.user_type = data;
                      this.submitSearch(1, this.saveType);
                    } else {
                      this.formItem.user_type = '';
                      this.submitSearch(1, this.saveType);
                    }
                  },
                },
              });
            }
          },
          render: (h, param) => {
            if (param.row.user_type === '0') {
              return h('div', {}, '村级河长');
            } else if (param.row.user_type === '1') {
              return h('div', {}, '镇级河长');
            } else if (param.row.user_type === '2') {
              return h('div', {}, '区级河长');
            } else if (param.row.user_type === '3') {
              return h('div', {}, '市级河长');
            } else if (param.row.user_type === '4') {
              return h('div', {}, '河长办经办人');
            } else if (param.row.user_type === '5') {
              return h('div', {}, '职能人员');
            } else if (param.row.user_type === '6') {
              return h('div', {}, '河长助理');
            } else if (param.row.user_type === '7') {
              return h('div', {}, '河长办负责人');
            } else if (param.row.user_type === '8') {
              return h('div', {}, '河长办人员');
            } else {
              return '';
            }
          },
        },
        {
          title: '部门',
          minWidth: 120,
          key: 'departmentName',
        },
        {
          title: '头像',
          minWidth: 100,
          render: (h, params) => {
            if (params.row.face_map.pho_address) {
              return h(
                'div',
                {
                  class: 'demo-upload-list',
                },
                [
                  h('img', {
                    attrs: {
                      src: domain2 + params.row.face_map.pho_address,
                    },
                  }),
                  h(
                    'div',
                    {
                      class: 'demo-upload-list-cover',
                    },
                    [
                      h('Icon', {
                        props: {
                          type: 'ios-eye-outline',
                        },
                        on: {
                          click: () => {
                            this.imgModal = true;
                            this.imgpath =
                              domain2 + params.row.face_map.pho_address;
                          },
                        },
                      }),
                      h('Icon', {
                        props: {
                          type: 'ios-trash-outline',
                        },
                        on: {
                          click: () => {
                            this.modalDel = true;
                            this.saveRow = params.row;
                          },
                        },
                      }),
                    ]
                  ),
                ]
              );
            } else {
              return h('div', '暂无头像');
            }
          },
        },
        {
          title: '用户操作',
          fixed: 'right',
          align: 'center',
          width: 270,
          render: (h, params) => {
            let type = params.row.user_type;
            if (type === '0' || type === '1' || type === '2' || type === '3') {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.edit(params.row, params.index);
                      },
                    },
                  },
                  '编辑'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'info',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.getRiver(params.row);
                      },
                    },
                  },
                  '查看河长负责河流'
                ),
                // h(
                //   'Button',
                //   {
                //     props: {
                //       type: 'warning',
                //       size: 'small',
                //     },
                //     style: {
                //       marginRight: '5px',
                //     },
                //     on: {
                //       click: () => {
                //         this.saveRow = params.row;
                //         this.comfirmModal = true;
                //       },
                //     },
                //   },
                //   '重置密码'
                // ),
              ]);
            } else {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.edit(params.row, params.index);
                      },
                    },
                  },
                  '编辑'
                ),
                // h(
                //   'Button',
                //   {
                //     props: {
                //       type: 'warning',
                //       size: 'small',
                //     },
                //     style: {
                //       marginRight: '5px',
                //     },
                //     on: {
                //       click: () => {
                //         this.saveRow = params.row;
                //         this.comfirmModal = true;
                //       },
                //     },
                //   },
                //   '重置密码'
                // ),
              ]);
            }
          },
        },
      ],
      theadArr2: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '用户名',
          minWidth: 120,
          key: 'username',
        },
        {
          title: '真实名称',
          minWidth: 120,
          key: 'realname',
        },
        {
          title: '联系电话',
          minWidth: 130,
          key: 'mobile',
        },
        {
          title: '电子邮件',
          minWidth: 130,
          key: 'email',
        },
        {
          title: '在职位置',
          width: 150,
          key: 'position',
        },
        {
          title: '角色',
          minWidth: 120,
          key: 'roleName',
        },
        {
          title: '用户类型',
          minWidth: 130,
          renderHeader: (h, params) => {
            if (this.saveType == '0') {
              return h(tableDropdown, {
                props: {
                  placement: 'bottom-start',
                  showArrow: true,
                  content: '用户类型',
                  data: [
                    { value: 'all', name: '全部' },
                    { value: '0', name: '村级河长' },
                    { value: '1', name: '镇级河长' },
                    { value: '2', name: '区级河长' },
                    { value: '3', name: '市级河长' },
                    { value: '6', name: '河长助理' },
                  ],
                },
                on: {
                  'on-choosed': data => {
                    if (data !== 'all') {
                      this.formItem.user_type = data;
                      this.submitSearch(1, this.saveType);
                    } else {
                      this.formItem.user_type = '';
                      this.submitSearch(1, this.saveType);
                    }
                  },
                },
              });
            } else {
              return h(tableDropdown, {
                props: {
                  placement: 'bottom-start',
                  showArrow: true,
                  content: '用户类型',
                  data: [
                    { value: 'all', name: '全部' },
                    { value: '4', name: '河长办经办人' },
                    { value: '7', name: '河长办负责人' },
                    { value: '8', name: '河长办人员' },
                  ],
                },
                on: {
                  'on-choosed': data => {
                    if (data !== 'all') {
                      this.formItem.user_type = data;
                      this.submitSearch(1, this.saveType);
                    } else {
                      this.formItem.user_type = '';
                      this.submitSearch(1, this.saveType);
                    }
                  },
                },
              });
            }
          },
          render: (h, param) => {
            if (param.row.user_type === '0') {
              return h('div', {}, '村级河长');
            } else if (param.row.user_type === '1') {
              return h('div', {}, '镇级河长');
            } else if (param.row.user_type === '2') {
              return h('div', {}, '区级河长');
            } else if (param.row.user_type === '3') {
              return h('div', {}, '市级河长');
            } else if (param.row.user_type === '4') {
              return h('div', {}, '河长办经办人');
            } else if (param.row.user_type === '5') {
              return h('div', {}, '职能人员');
            } else if (param.row.user_type === '6') {
              return h('div', {}, '河长助理');
            } else if (param.row.user_type === '7') {
              return h('div', {}, '河长办负责人');
            } else if (param.row.user_type === '8') {
              return h('div', {}, '河长办人员');
            } else {
              return '';
            }
          },
        },
        {
          title: '部门',
          minWidth: 120,
          key: 'departmentName',
        },
        {
          title: '头像',
          minWidth: 100,
          render: (h, params) => {
            if (params.row.face_map.pho_address) {
              return h(
                'div',
                {
                  class: 'demo-upload-list',
                },
                [
                  h('img', {
                    attrs: {
                      src: domain2 + params.row.face_map.pho_address,
                    },
                  }),
                  h(
                    'div',
                    {
                      class: 'demo-upload-list-cover',
                    },
                    [
                      h('Icon', {
                        props: {
                          type: 'ios-eye-outline',
                        },
                        on: {
                          click: () => {
                            this.imgModal = true;
                            this.imgpath =
                              domain2 + params.row.face_map.pho_address;
                          },
                        },
                      }),
                      h('Icon', {
                        props: {
                          type: 'ios-trash-outline',
                        },
                        on: {
                          click: () => {
                            this.modalDel = true;
                            this.saveRow = params.row;
                          },
                        },
                      }),
                    ]
                  ),
                ]
              );
            } else {
              return h('div', '暂无头像');
            }
          },
        },
        {
          title: '绑定河长',
          minWidth: 150,
          render: (h, params) => {
            if (params.row.ass_chief_map) {
              // 绑定河长一对一
              return h('div', {}, params.row.ass_chief_map.realname);
            } else if (
              params.row.ass_chief_list &&
              params.row.ass_chief_list.length > 0
            ) {
              // 绑定河长一对多
              let str = '';
              params.row.ass_chief_list.map((item, index) => {
                if (index === params.row.ass_chief_list.length - 1) {
                  str += `${item.realname}`;
                } else {
                  str += `${item.realname}，`;
                }
              });
              return h('div', {}, str);
            } else {
              return h('div', {}, '暂无');
            }
          },
        },
        {
          title: '用户操作',
          fixed: 'right',
          align: 'center',
          width: 270,
          render: (h, params) => {
            let type = params.row.user_type;
            if (type === '0' || type === '1' || type === '2' || type === '3') {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.edit(params.row, params.index);
                      },
                    },
                  },
                  '编辑'
                ),
                h(
                  'Button',
                  {
                    props: {
                      type: 'info',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.getRiver(params.row);
                      },
                    },
                  },
                  '查看河长负责河流'
                ),
                // h(
                //   'Button',
                //   {
                //     props: {
                //       type: 'warning',
                //       size: 'small',
                //     },
                //     style: {
                //       marginRight: '5px',
                //     },
                //     on: {
                //       click: () => {
                //         this.saveRow = params.row;
                //         this.comfirmModal = true;
                //       },
                //     },
                //   },
                //   '重置密码'
                // ),
              ]);
            } else {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small',
                    },
                    style: {
                      marginRight: '5px',
                    },
                    on: {
                      click: () => {
                        this.edit(params.row, params.index);
                      },
                    },
                  },
                  '编辑'
                ),
                // h(
                //   'Button',
                //   {
                //     props: {
                //       type: 'warning',
                //       size: 'small',
                //     },
                //     style: {
                //       marginRight: '5px',
                //     },
                //     on: {
                //       click: () => {
                //         this.saveRow = params.row;
                //         this.comfirmModal = true;
                //       },
                //     },
                //   },
                //   '重置密码'
                // ),
              ]);
            }
          },
        },
      ],
      saveRow: {},
      waterRecordPage: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
      comfirmModal: false,
      actionPage: 1,
      formItem: {
        realname: '',
        areas: {},
        username: '',
        dep_name: '',
        user_type: '',
        ass_chief_name: '',
      },
      userModal: false,
      userItem: {
        ass_chiefs: [],
      },
      btnSave: false,
      btnChange: false,
      updateTitle: '',
      rolenameList: [],
      departmentNameList: [],
      areaArr: [],
      selectData: [],
      saveType: 0,
      typeList: [
        {
          title: '村级河长',
          value: '0',
        },
        {
          title: '镇级河长',
          value: '1',
        },
        {
          title: '区级河长',
          value: '2',
        },
        {
          title: '市级河长',
          value: '3',
        },
        {
          title: '河长办经办人',
          value: '4',
        },
        {
          title: '职能人员',
          value: '5',
        },
        {
          title: '市级河长助理',
          value: '6',
        },
        {
          title: '河长办负责人',
          value: '7',
        },
        {
          title: '河长办人员',
          value: '8',
        },
        {
          title: '河长助理',
          value: '9',
        },
      ],
      assList: [],
      isEdit: false, // 是否编辑
      saveAssChiefs: [], // 保存ass_chiefs
      isTown: true // 是否有town
    };
  },
  methods: {
    checkName() {
      if (this.userItem.username.length === 0) {
        return;
      }
      let params = {
        data: {
          searchValue: {
            username: this.userItem.username,
          },
        },
        url: this.urlUserList,
        token: storage.session.get('token'),
        success: res => {
          if (parseInt(res.data.result.totalSize) !== 0) {
            this.$Message.warning({
              content: '已被注册',
            });
          } else {
            this.$Message.success({
              content: '可用',
            });
          }
        },
      };
      ajaxPost(params);
    },
    aa(name) {
      this.actionPage = 1;
      if (name == '河长用户') {
        this.formItem.ass_chief_name = '';
        this.submitSearch(this.actionPage, 0);
        this.saveType = 0;
      } else if (name == '河长办用户') {
        this.formItem.ass_chief_name = '';
        this.submitSearch(this.actionPage, 1);
        this.saveType = 1;
      } else {
        this.formItem.ass_chief_name = '';
        this.submitSearch(this.actionPage, 2);
        this.saveType = 2;
      }
    },
    submitSearch(page = 1, type) {
      let that = this;
      let params = {
        data: {
          order: { _id: -1 },
          searchValue: {},
          pageSize: this.waterRecordPage.pageSize,
          page,
        },
        url: this.urlUserList,
        token: storage.session.get('token'),
        success: res => {
          that.$Loading.finish();
          that.userData = res.data.result.result;
          for (let i = 0; i < that.userData.length; i++) {
            if (that.userData[i].roles.length > 0) {
              that.userData[i].roleName = that.userData[i].roles[0].rolename;
            }
            if (that.userData[i].departments.length > 0) {
              that.userData[i].departmentName =
                that.userData[i].departments[0].name;
            }
          }
          that.waterRecordPage.total = res.data.result.totalSize;
        },
      };
      if (type === 0) {
        params.data.searchValue.user_type = '0,1,2,3|#|in';
      } else if (type === 1) {
        params.data.searchValue.user_type = '4,7,8|#|in';
      } else {
        params.data.searchValue.user_type = '6,9|#|in';
      }
      if (this.formItem.realname !== '') {
        params.data.searchValue.realname = `${this.formItem.realname}|#|like`;
      }
      if (
        this.formItem.areas !== undefined &&
        this.formItem.areas.name !== undefined
      ) {
        if (this.formItem.areas.level == '2') {
          params.data.searchValue[
            'departments.area'
          ] = this.formItem.areas.name;
        } else if (this.formItem.areas.level == '3') {
          params.data.searchValue[
            'departments.town'
          ] = this.formItem.areas.name;
        }
      }
      if (this.formItem.username !== '') {
        params.data.searchValue.username = `${this.formItem.username}|#|like`;
      }
      if (this.formItem.dep_name !== '') {
        params.data.searchValue[
          'departments.name'
        ] = `${this.formItem.dep_name}|#|like`;
      }
      if (this.formItem.user_type !== '') {
        params.data.searchValue.user_type = `${this.formItem.user_type}|#|like`;
      }
      if (this.formItem.ass_chief_name !== '') {
        params.data.searchValue.ass_chief_name = this.formItem.ass_chief_name;
      }
      ajaxPost(params);
    },
    changePage(page) {
      this.submitSearch(page, this.saveType);
      this.actionPage = page;
    },
    addUser() {
      this.isEdit = false;
      this.userModal = true;
      this.updateTitle = '新增用户';
      this.btnChange = false;
      this.btnSave = true;
      this.userItem = {
        username: '',
        password: '',
        realname: '',
        email: '',
        mobile: '',
        position: '',
        rolename: '',
        departmentName: '',
        user_type: '',
        password2: '',
        ass_chiefs: [],
      };
      this.$refs.userForm.resetFields();
    },
    cancel() {
      this.userModal = false;
    },
    getRoleNameList() {
      let that = this;
      let params = {};
      params.data = {};
      params.token = storage.session.get('token');
      params.url = this.urlRoleList;
      params.success = function (res) {
        that.$Loading.finish();
        that.rolenameList = res.data.result.result;
      };
      ajaxPost(params);
    },
    getDepartmentNameList() {
      let params = {
        data: {
          searchValue: {
            type: '0',
          },
        },
        url: this.urlDepartmentNameList,
        token: storage.session.get('token'),
        success: res => {
          this.departmentNameList = res.data.result;
        },
      };
      let level = storage.session.get('level');
      let aa = storage.session.get('department');
      let deps = JSON.parse(aa);
      let dep_name = deps[0].name;
      if (level == '1') {
        params.data.searchValue.level1 = dep_name;
      } else if (level == '2') {
        params.data.searchValue.level2 = dep_name;
      } else if (level == '3') {
        params.data.searchValue.level3 = dep_name;
      } else if (level == '4') {
        params.data.searchValue.level4 = dep_name;
      }
      ajaxPost(params);
    },
    ok(type) {
      let that = this;
      let params = {};
      params.data = {};
      this.$refs.userForm.validate(boo => {
        if (boo) {
          params.data = JSON.parse(JSON.stringify(this.userItem));
          // if (this.userItem.ass_chiefs === undefined) {
          //   this.userItem.ass_chiefs = []
          // }
          if (params.data.ass_chiefs === undefined) {
            params.data.ass_chiefs = [];
          }
          if (type === 0) {
            // rules已校验，遂注释
            // let reg = /^(?=.*[A-Za-z])(?=.*\d)/;
            // let right = this.userItem.password.match(reg);
            // if (right === null) {
            //   this.$Notice.warning({
            //     desc: '密码中必须包含大写字母、小写字母、数字两两组合',
            //   });
            // }
            // if (this.userItem.password !== this.userItem.password2) {
            //   this.$Notice.warning({
            //     title: '两次密码不一致，请重新填写',
            //   });
            // }

            params.data.password = md5(this.userItem.password);
          }
          // 绑定河长一对一
          if (type === 1) {
            params.data.ass_chief = params.data.ass_chiefs;
            // this.userItem.ass_chief = this.userItem.ass_chiefs
          }
          for (let i = 0; i < this.rolenameList.length; i++) {
            if (this.rolenameList[i].rolename === this.userItem.rolename) {
              params.data.roles = [];
              params.data.roles[0] = {};
              params.data.roles[0].roleid = this.rolenameList[i].roleid;
              params.data.roles[0].rolename = this.userItem.rolename;
              params.data.roles[0].system_id = this.rolenameList[i].system_id;
            }
          }
          params.data.dep_name = this.userItem.departmentName;
          delete params.data.departmentName;
          delete params.data.rolename;
          delete params.data.password2;
          params.url = this.urlUserNew;
          if (type === 1) {
            params.url = this.urlUserEdit;
          }
          params.token = storage.session.get('token');
          params.success = function (res) {
            if (res.data.code == '0000') {
              that.$Loading.finish();
              that.$Message.success({
                content: res.data.message,
              });
              that.userModal = false;
              that.submitSearch(that.actionPage, that.saveType);
            } else {
              that.$Message.warning({
                content: res.data.message,
              });
            }
          };
          ajaxPost(params);
        }
      });
    },
    del1() {
      if (this.selectData.length > 0) {
        this.$refs.delModal.showModal();
      } else {
        this.$Message.warning('请选择用户');
      }
    },
    del() {
      this.selectData = [];
      this.submitSearch(this.actionPage, this.saveType);
    },
    showSelect(data) {
      this.selectData = data; // 把勾选的数组存起来
    },
    edit(row) {
      let that = this;
      this.isEdit = true;
      this.updateTitle = '编辑用户';
      this.userModal = true;
      this.btnChange = true;
      this.btnSave = false;
      this.userItem = {
        username: row.username,
        password: row.password,
        realname: row.realname,
        email: row.email,
        mobile: row.mobile,
        position: row.position,
        rolename: row.rolename,
        departmentName: row.departmentName,
        user_type: row.user_type,
        _id: row._id,
        ass_chiefs: row.ass_chief || row.ass_chiefs || [],
      };
      // 保存当前ass_chiefs的值
      this.saveAssChiefs = [...this.userItem.ass_chiefs];
      this.userItem.rolename = row.roles[0].rolename;
      this.getAssList();
    },
    changeRole(data) {
      this.rolenameList.map(item => {
        if (data == item.rolename) {
          this.userItem.user_type = item.user_type;
        }
        if (this.saveType === 2) { // 河长助理用户
          // 用户角色不是助理,ass_chiefs为[]
          this.userItem.ass_chiefs = data.slice(-2) !== '助理' ? [] : this.saveAssChiefs;
        }
      });
    },
    backPassword() {
      let params = {
        data: {
          _id: this.saveRow._id,
        },
        url: this.urlPassWord,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.$Message.success({
              content: '重置成功',
            });
            this.comfirmModal = false;
            this.submitSearch(this.actionPage, this.saveType);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    getRiver(row) {
      this.riverModal = true;
      let params = {
        data: {
          searchValue: {
            users: row.username,
          },
          fieldName: ['river_no', 'river_name', 'area', 'town'],
        },
        url: this.urlriver,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.riverData = res.data.result.result;
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    getAreaData(data) {
      this.formItem.areas = data;
    },
    getDepData(data) {
      if (data === undefined) {
        this.formItem.dep_name = '';
      } else {
        this.formItem.dep_name = data;
      }
    },
    delTx() {
      let params = {
        data: {
          _id: this.saveRow.face_map._id,
        },
        url: '/sys/face/del',
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.$Message.success('删除成功');
            this.submitSearch(this.actionPage, this.saveType);
            this.modalDel = false;
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    getAssList() {
      let params = {
        data: {
          searchValue: {
            user_type: '0,1,2|#|in',
            'departments.name': this.userItem.departmentName,
          },
        },
        url: '/sys/userinfo/list',
        token: storage.session.get('token'),
        success: res => {
          this.assList = res.data.result.result;
        },
      };
      if (this.userItem.user_type === '6') {
        params.data.searchValue.user_type = '3';
      }
      ajaxPost(params);
    },
    changeAssChief() {
      this.userItem.ass_chiefs = [];
    },
  },
  mounted() {
    let deps = JSON.parse(storage.session.get('department'))[0];
    this.isTown = deps.town ? true : false;
    this.submitSearch(1, 0);
    this.getRoleNameList();
    this.getDepartmentNameList();
  },
};
</script>
